<template>
  <div id="app">
    <Left :resData="resData"></Left>
    <Right :resData="resData"></Right>
  </div>
</template>

<script>
import Left from "./components/Left.vue";
import Right from "./components/Right.vue";
export default {
  components: {
    Left,
    Right,
  },
  data() {
    return {
      resData: [
        {
          titName: "旅游1",
          child: ["123", "465", "789"],
        },
        {
          titName: "旅游2",
          child: ["123", "465", "789"],
        },
        {
          titName: "旅游3",
          child: ["123", "465", "789"],
        },
        {
          titName: "旅游4",
          child: ["123", "465", "789"],
        },
        {
          titName: "旅游5",
          child: ["123", "465", "789"],
        },
        {
          titName: "旅游6",
          child: ["123", "465", "789"],
        },
        {
          titName: "旅游7",
          child: ["123", "465", "789"],
        },
        {
          titName: "旅游8",
          child: ["123", "465", "789"],
        },
        {
          titName: "旅游9",
          child: ["123", "465", "789"],
        },
        {
          titName: "旅游10",
          child: ["123", "465", "789"],
        },
      ],
    };
  },
  mounted() {
    this.$axios.get('/data').then((res) => {
     this.resData = res.data;
    })
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
html,
body,
#app {
  width: 100%;
  height: 100%;
}
#app {
  display: flex;
}
#Left {
  height: 100%;
  width: 1rem;
  background: skyblue;
}
#Right {
  height: 100%;
  flex: 1;
  background: springgreen;
  overflow: scroll;
}
</style>
